<!-- 个人中心 -->
<template>
  <div id="userInfo">
    <!-- 信息展示 -->
    <el-row>
      <el-col :span="24">
        <!-- 背景墙 -->
        <div
          class="cover"
          :style="{
            backgroundColor:
              bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)'
          }"
        >
          <!--  背景 -->
          <div class="bg">
            <el-upload
              :action="baseURL + '/api/upload/cover'"
              list-type="picture"
              class="uploader"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :with-credentials="true"
              :headers="{
                Authorization: 'Bearer ' + token
              }"
              :show-file-list="false"
            >
              <template #default>
                <el-image :src="baseURL + userInfo.cover" lazy>
                  <template #error>
                    <div class="image-slot">
                      <i class="iconfont icon-bianzu"></i>
                      加载失败
                    </div>
                  </template>

                  <template #placeholder>
                    <div class="error">
                      <el-icon class="is-loading">
                        <i
                          class="iconfont icon-zhengzaijiazai"
                          style="font-size='20px'"
                        ></i>
                      </el-icon>
                      正在加载
                    </div>
                  </template>
                </el-image>
              </template>
            </el-upload>
          </div>
          <!-- 个人信息 -->
          <div class="info">
            <!-- 头像 -->
            <div class="avatar">
              <el-upload
                :action="baseURL + '/api/upload/avatar'"
                list-type="picture"
                class="uploader"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :with-credentials="true"
                :headers="{
                  Authorization: 'Bearer ' + token
                }"
                :show-file-list="false"
              >
                <template #default>
                  <el-image :src="baseURL + userInfo.avatar" lazy>
                    <template #error>
                      <div class="image-slot">
                        <i class="iconfont icon-bianzu"></i>
                        加载失败
                      </div>
                    </template>

                    <template #placeholder>
                      <div class="error">
                        <el-icon class="is-loading">
                          <i
                            class="iconfont icon-zhengzaijiazai"
                            style="font-size='20px'"
                          ></i>
                        </el-icon>
                        正在加载
                      </div>
                    </template>
                  </el-image>
                </template>
              </el-upload>
            </div>
            <!-- 介绍 -->
            <div class="des">
              <div class="author">
                <!-- 名称 -->
                <div class="name">{{ userInfo.name }}</div>
                <!-- 职业 -->
                <div class="occupation">{{ userInfo.occupation }}</div>
              </div>
              <!-- 邮箱 -->
              <div class="email">{{ userInfo.email }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <div class="centent">
      <el-row :gutter="30">
        <!-- 日历 -->
        <el-col :md="10">
          <div
            class="calendar"
            :style="{
              backgroundColor:
                bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
              color: bgcColor.color === '#000' ? '#000' : 'rgb(33, 33, 48)'
            }"
          >
            <el-calendar
              :style="{
                backgroundColor:
                  bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
                color: bgcColor.color === '#000' ? '#000' : '#fff'
              }"
            >
              <template #header>
                <span
                  :style="{
                    color: bgcColor.color === '#000' ? '#000' : '#fff'
                  }"
                  >活动历程</span
                >
              </template>
            </el-calendar>
          </div>
        </el-col>
        <!-- 操作 -->
        <el-col :md="14">
          <div
            class="operation"
            :style="{
              backgroundColor:
                bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)'
            }"
          >
            <div class="title">
              <div
                class="nav"
                :style="{
                  color: bgcColor.color === '#000' ? '#828690' : '#fff'
                }"
                :class="{
                  active: currIndex === 0
                }"
                @click="switchCurrIndex(0)"
              >
                About Me
              </div>
              <div
                class="nav"
                :style="{
                  color: bgcColor.color === '#000' ? '#828690' : '#fff'
                }"
                :class="{
                  active: currIndex === 1
                }"
                @click="switchCurrIndex(1)"
              >
                Setting
              </div>
            </div>
            <!-- 展示内容 -->
            <div class="operation-main">
              <keep-alive>
                <component
                  :is="typeComponentMap[currIndex]"
                  :userInfo="userInfo"
                ></component>
              </keep-alive>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { baseURL, AxiosDefaultTypes } from '@/utils/axios'
import cache, { CacheType } from '@/utils/cache'
import { AboutMe, Setting } from '@/components/admin/user'
import { ElMessage } from 'element-plus'
import type {
  AxiosLoginDataTypes,
  UserInfoVuexTypes
} from '@/server/serve/api_admintor'

const store = useStore()

// 当前背景主题
const bgcColor = computed(() => store.state.Background)

// 用户信息
const userInfo = computed((): UserInfoVuexTypes => store.state.userInfo)

// 上传成功 封面
const handleAvatarSuccess = (res: AxiosDefaultTypes<AxiosLoginDataTypes>) => {
  if (res.code) {
    return ElMessage({
      type: 'warning',
      message: res.mes
    })
  }
  // 更新token
  cache.setItem('token', res.data?.token, CacheType.session)
  // 更新vuex
  store.commit('setUserInfo', res.data?.vuexData)
  ElMessage({
    type: 'success',
    message: res.mes
  })
  // window.location.reload()
}

// 获取token
const token = ref<string>(cache.getItem('token', CacheType.session))

// 上传之前的处理
const beforeAvatarUpload = (file: any): any => {
  const isJPG = /^image\/(jpeg|png|ico|jpg)$/.test(file.type)
  const isLt2M = file.size / 1024 / 1024 < 1
  if (!isJPG) {
    ElMessage({
      message: '上传头像图片只能是 JPG/PNG/ICO/JPEG 格式!',
      type: 'warning'
    })
  }
  if (!isLt2M) {
    ElMessage({
      message: '上传图片大小不能超过 1MB!',
      type: 'warning'
    })
  }
  return isJPG && isLt2M
}

// 当前切换指向
const currIndex = ref<number>(0)
// 动态组件对应映射
const typeComponentMap = {
  0: AboutMe,
  1: Setting
}
// 切换切换
const switchCurrIndex = (num: number) => {
  currIndex.value = num
}

onMounted(() => {
  // @ts-ignore
  document.querySelector('.el-upload--picture').style.width = '100%'
  // @ts-ignore
  document.querySelector('.el-upload--picture').style.height = '100%'
})
</script>

<style scoped lang="less">
#userInfo {
  .cover {
    background-color: #fff;
    height: 320px;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 15px;
    .bg {
      width: 100%;
      height: 218px;
      .uploader {
        width: 100%;
        height: 218px;
        border-radius: 20px;
        overflow: hidden;
        .el-upload--picture {
          img {
            width: 100%;
            height: 218px;
          }
        }
      }
    }
    .info {
      display: flex;
      position: relative;
      box-sizing: border-box;
      padding-top: 20px;
      .avatar {
        position: absolute;
        width: 87.5px;
        height: 87.5px;
        top: -50px;
        left: 20px;
        border-radius: 50%;
        overflow: hidden;
        background-color: rgb(192, 196, 204);
        .uploader {
          img {
            display: block;
            width: 87.5px;
            height: 87.5px;
          }
        }
      }
      .des {
        margin-left: 130px;
        display: flex;
        .author {
          .name {
            font-size: 20px;
            color: #f56c6c;
            font-weight: 600;
            font-family: '楷体';
          }
          .occupation {
            font-size: 16px;
            color: #828690;
            font-family: '楷体';
            margin-top: 6px;
            text-indent: 4px;
          }
        }
        .email {
          margin-left: 20px;
          color: #464a53;
          font-weight: 700;
          font-family: 'poppins', sans-serif;
          margin-top: 4px;
        }
      }
    }
  }
  .el-image {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    // padding-top: 50px;
    .image-slot,
    .error {
      display: flex;
      color: #999;
      font-size: 17px;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      i {
        font-size: 40px;
      }
    }
  }
  // 内容
  .centent {
    width: 100%;
    // 日历
    .calendar {
      margin-top: 30px;
      height: 650px;
      border-radius: 20px;
      overflow: hidden;
      box-sizing: border-box;
      .el-calendar {
        height: 100%;
      }
    }
    // 操作
    .operation {
      margin-top: 30px;
      min-height: 650px;
      border-radius: 20px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 20px;
      .title {
        display: flex;
        height: 35px;
        border-bottom: 1px solid #dee2e6;
        box-sizing: border-box;
        .nav {
          padding: 7px 17px;
          font-size: 14px;
          box-sizing: border-box;
          height: 35px;
          cursor: pointer;
          user-select: none;
          margin-right: 10px;
          font-weight: 600;
          font-family: '微软';
          transition: all 0.3s;
          border-bottom: 1px solid transparent;
          &.active {
            color: rgb(244, 108, 108) !important;
            border-bottom: 1px solid rgb(244, 108, 108);
          }
        }
      }
      .operation-main {
        box-sizing: border-box;
        padding: 10px 16px;
      }
    }
  }
}
</style>
